<template>
    <div class="guaranteeCard">
        <Swipe :autoplay="3000" indicator-color="white" v-for="(item,index) in ret.guarantee">
            <swipe-item v-if="item.Id == devId">
                <div class="swipeItem" >
                    <h6 class="title1">{{ JSON.parse(item.Info).midxuc013 }}</h6>
                    <h2 class="title2">{{ '保修开始时间：'+ moment(item.Created)}}</h2>
                    <h2 class="title3">{{ '质保时间一年' }}</h2>
                </div>
            </swipe-item>
        </Swipe>
        <!--<div class="bannerCard">
            <div class="header">
                <div class="headerItem">分享密码管理员</div>
                <Button round plain  type="info" size="small">编辑</Button>
            </div>
            <div class="headerLine"></div>
            <div class="body">

            </div>
        </div>-->

        <div class="attentionCard">
            <div class="header">
                使用注意事项
            </div>
            <div class="headerLine"></div>
            <div class="body">
                <div>1、智能锁电子故障请用钥匙应急开门，无钥匙产生的紧急开门费用由消费者承担，钥匙请随身携带，以备不时之需</div>
                <div>2、高档五金使用软干棉布保养哦，使用液体保养导致的问题不在保修范围</div>
                <div>3、电池不要等到没电了才想到更换，定期检查是否漏液，以防腐蚀</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Button,Swipe, SwipeItem  } from 'vant';
    import { post } from "../../js/utils";
    import moment from 'moment';

    export default {
        name: 'GuaranteeCard',
        components: {
            Button,
            Swipe,
            SwipeItem
        },
        data () {
            return {
                devId: this.$route.query.devId,
                ret:{},
                items: [{name: '确认'}],
            }
        },
        async created () {
            this.ret = await post("/user/listGateways")
        },
        methods: {
            moment: function (created){
                return moment(created).format('YYYY年-MM月-DD日')
            }
        }
    }
</script>

<style scoped>
    .swipeItem  {
        background: url(../../assets/Guarantee_01.png) no-repeat center center;
        background-size: 100% 100%;
        margin: 20px;
        height: 35vh;
        text-align: left;
    }
    .swipeItem > .title1{
        padding: 4vh 2vh 2vh 2vh;
    }
    .swipeItem > .title2{
        padding: 2vh 2vh 2vh 2vh;
    }
    .swipeItem > .title3{
        padding: 2vh 2vh 4vh 2vh;
    }
    /*
    .bannerCard {
        background: url(../../assets/Guarantee_02.png) no-repeat center center;
        background-size: 100% 100%;
        width: 100vw;
        height: 34.4vw;
    }

    .bannerCard > .header{
        width: 100vw;
        height: 13vw;

        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 90%;
        padding: 0 4vw;
    }

    .bannerCard > .headerLine {
        width: 100vw;
        height: 1px;
        background-color: rgba(120, 120, 120, 0.3);
    }*/

    .attentionCard {
        margin-top: 10vw;
        background: url(../../assets/Guarantee_03.png) no-repeat center center;
        background-size: 100% 100%;
        width: 100vw;
        height: 50vw;
    }

    .attentionCard > .header {
        height: 13vw;
        text-align: left;
        padding-left: 4vw;
        line-height: 13vw;

    }

    .attentionCard > .headerLine {
          width: 100vw;
          height: 1px;
          background-color: rgba(120, 120, 120, 0.3);
      }

    .attentionCard > .body{
        text-align: left;
        font-size: 10px;
        color: rgba(120, 120, 120, 1);

        padding-left: 4vw;
        padding-top: 1vw;
        padding-right: 4vw;
        line-height: 6vw;
    }
</style>
